<template>
  <view class="student-list">
    <!-- 列表标题 -->
    <view class="list-header">
      <text class="header-item" style="flex: 0.3">序号</text>
      <text class="header-item" style="flex: 1">姓名</text>
      <text class="header-item" style="flex: 1.5">学号</text>
      <text class="header-item" style="flex: 0.5">年龄</text>
      <text class="header-item" style="flex: 0.5">性别</text>
      <text class="header-item" style="flex: 1.2">专业</text>
      <text class="header-item" style="flex: 1.2">操作</text>
    </view>

    <!-- 学生列表 -->
    <view 
      v-for="(student, index) in students" 
      :key="student.id"
      class="list-row"
      :style="{ backgroundColor: index % 2 === 0 ? '#f9f9f9' : '#fff' }"
    >
      <text class="row-item" style="flex: 0.3">{{ index + 1 }}</text>
      <text class="row-item" style="flex: 1">{{ student.name }}</text>
      <text class="row-item" style="flex: 1.5">{{ student.sno }}</text>
      <text class="row-item" style="flex: 0.5">{{ student.age }}</text>
      <text class="row-item" style="flex: 0.5">{{ student.gender }}</text>
      <text class="row-item" style="flex: 1.2">{{ student.major }}</text>
      
      <!-- 操作按钮 -->
      <view class="row-item actions" style="flex: 1.2">
        <button 
          size="mini" 
          @click="handleEdit(index)"
          class="edit-btn"
        >编辑</button>
        <button 
          size="mini" 
          type="warn" 
          @click="handleDelete(index)"
          class="delete-btn"
        >删除</button>
      </view>
    </view>

    <!-- 空状态提示 -->
    <view v-if="students.length === 0" class="empty-tip">
      <text>暂无学生数据</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    students: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    handleEdit(index) {
      this.$emit('edit', index)
    },
    handleDelete(index) {
      uni.showModal({
        title: '删除确认',
        content: '确定要删除该学生记录吗？',
        success: (res) => {
          if (res.confirm) {
            this.$emit('delete', index)
            uni.showToast({
              title: '删除成功',
              icon: 'success'
            })
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.student-list {
  margin-top: 20px;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  overflow: hidden;
}

/* 列表标题样式 */
.list-header {
  display: flex;
  padding: 12px 8px;
  background-color: #007AFF;
  color: white;
  font-weight: bold;
}

.header-item {
  text-align: center;
  font-size: 14px;
}

/* 列表行样式 */
.list-row {
  display: flex;
  padding: 12px 8px;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
}

.row-item {
  text-align: center;
  font-size: 14px;
  color: #333;
  word-break: break-all;
  padding: 0 3px;
}

/* 操作按钮样式 */
.actions {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.edit-btn {
  background-color: #007AFF;
  color: white;
  border: none;
}

.delete-btn {
  background-color: #dd524d;
  color: white;
  border: none;
}

/* 空状态提示 */
.empty-tip {
  padding: 20px;
  text-align: center;
  color: #999;
  font-size: 14px;
}

/* 按钮点击效果 */
button[type=primary], button[type=warn] {
  border-radius: 4px;
}

button[type=primary]:active, button[type=warn]:active {
  opacity: 0.7;
}
</style>